A layout approach partitions a plot into a matrix of panels. Each panel shows a different subset of the data.
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"</canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
<!-- Create the data for the graph -->
var data = {
"x" : {
"Code" : ["FL","DLBCL","DLBCL","FL","FL","DLBCL","DLBCL","DLBCL","DLBCL","DLBCL","FL","FL","FL","DLBCL","FL","DLBCL","DLBCL","DLBCL","FL","DLBCL"],
"Drug" : ["4 mg","2 mg","3 F6 mg","4 mg","3 F6 mg","3 F6 mg","2 mg","2 mg","2 mg","2 mg","1 mg","4 F6 mg","3 F6 mg","4 F6 mg","3 F6 mg","2 mg","2 mg","1 mg","3 F6 mg","4 mg"]
},
"y" : {
"data" : [
[4.8,33.9,40.1,6.9,28.8,40.5,31.2,40,41.8,29.7,1.5,10,45.5,14.9,26.7,29.9,5.6,10.7,25.9,20.8],
[null,null,null,null,null,35.5,null,35,null,null,null,5,null,null,21.7,null,0.6,null,null,null],
[29.3,23,19.6,14,5.2,-1.4,-2.8,-6.9,-6.9,-7.1,-13.2,-13.9,-14.5,-16.6,-27.2,-33.9,-43.5,-43.7,-51.4,-52.6],
[192.7,175.1,93.2,172,121.4,77.1,33.7,73.6,188.6,122.8,80.8,32.5,183.4,87.2,43.5,46.6,115.4,99.9,180.5,130.3]
],
"vars" : ["Duration","Discontinued","Response","Baseline"]
},
"z" : {
"Panel" : [1,1,2,3]
}
}
<-- Create the configuration for the graph -->
var config = {
"graphOrientation":"vertical",
"graphType":"Bar",
"layoutAdjust":"true",
"layoutConfig":[
{
"axisCoordinate":"true",
"graphType":"BarLine",
"showDataValues":"true",
"xAxis":[
"Duration"
],
"xAxis2":[
"Discontinued"
],
"xAxisTitle":"Duration of Treatment"
},
{
"colorBy":"Drug",
"legendColumns":5,
"legendInside":"true",
"legendPosition":"bottomLeft",
"showLegend":"true",
"showLegendTitle":"false",
"xAxisTitle":"Change from Baseline (%)"
},
{
"barLollipopFactor":1.5,
"barLollipopOpen":"false",
"barType":"lollipop",
"xAxisTitle":"Baseline (mm)"
}
],
"layoutLabelShow":"false",
"layoutTopology":"3X1",
"showLegend":"false",
"theme":"CanvasXpress",
"title":"Tumor Response and Duration by Subject Id",
"xAxis2Show":"false"
}
<!-- Call the CanvasXpress function to create the graph -->
var cX = new CanvasXpress("canvasId", data, config);
<-- Functions after rendering graph -->
cX.segregateVariables(["Panel"]);
</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-layoutContinuous-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/cX-layoutContinuous-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
z=read.table("https://www.canvasxpress.org/data/cX-layoutContinuous-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
smpAnnot=x,
varAnnot=z,
graphOrientation="vertical",
graphType="Bar",
layoutAdjust=TRUE,
layoutConfig=list(list(axisCoordinate=TRUE, graphType="BarLine", showDataValues=TRUE, xAxis=list("Duration"), xAxis2=list("Discontinued"), xAxisTitle="Duration of Treatment"), list(colorBy="Drug", legendColumns=5, legendInside=TRUE, legendPosition="bottomLeft", showLegend=TRUE, showLegendTitle=FALSE, xAxisTitle="Change from Baseline (%)"), list(barLollipopFactor=1.5, barLollipopOpen=FALSE, barType="lollipop", xAxisTitle="Baseline (mm)")),
layoutLabelShow=FALSE,
layoutTopology="3X1",
showLegend=FALSE,
theme="CanvasXpress",
title="Tumor Response and Duration by Subject Id",
xAxis2Show=FALSE,
afterRender=list(list("segregateVariables", list("Panel")))
)